<template>
  <!-- 收银台 - 支付方式 -->
  <view class="pay-container">
    <view class="boxS price-box">
      <view class="headerss">金额合计</view>
      <view class="price-num">
        ￥
        <text style="color: #333333; font-size: 54rpx">{{ price }}</text>
        元
      </view>
    </view>
    <view class="payDate boxS">
      <view class="p-head">选择支付方式</view>
      <view class="pay-mind">
        <!-- app or 普通浏览器 -->
        <radio-group @change="radioChange" v-if="!isWxx">
          <label v-for="item in payTypes" :key="item.name">
            <view class="radio-item">
              <view class="left">
                <i-icon
                  :icon="item.icon"
                  class="middle mr-10"
                  type="single"
                  :size="item.value === '1' ? '56rpx' : '60rpx'"
                  :color="item.color"
                ></i-icon>
                {{ item.name }}
                <text class="balance" v-if="info && item.value === '2'"
                  >剩余：{{ info.balance }}元</text
                >
              </view>
              <view class="right">
                <radio
                  :value="item.value"
                  color="#FBD220"
                  :checked="item.value === '0'"
                />
              </view>
            </view>
          </label>
        </radio-group>

        <!-- 如果是微信浏览器 -->
        <radio-group @change="radioChange" v-else>
          <label v-for="item in payTypess" :key="item.name">
            <view class="radio-item">
              <view class="left">
                <i-icon
                  :icon="item.icon"
                  class="middle mr-10"
                  type="single"
                  :size="item.value === '1' ? '56rpx' : '60rpx'"
                  :color="item.color"
                ></i-icon>
                {{ item.name }}
                <text class="balance" v-if="info && item.value === '2'"
                  >剩余：{{ info.balance }}元</text
                >
              </view>
              <view class="right">
                <radio
                  :value="item.value"
                  color="#FBD220"
                  :checked="item.value === '1'"
                />
              </view>
            </view>
          </label>
        </radio-group>
        <button class="goPay" @click="submit()" id="openapps">确认支付</button>
      </view>
    </view>
    <view class="bottoms">
      <text>如有疑问请联系客服：</text>
      <text style="color: #fbb000" @click="call">{{
        serviceNumber.number
      }}</text>
    </view>
    <u-modal
      v-model="mShow6"
      title="温馨提示"
      content="订单系统收款略有延迟，支付成功后可刷新订单查看结果"
      cancel-text="支付失败"
      confirm-text="支付成功"
      confirm-color="#EB5C02"
      :show-cancel-button="true"
      @confirm="confirmHE"
      @cancel="mShow6 = false"
    ></u-modal>
    <!-- 确认弹框 -->
    <u-popup
      v-model="mShowye"
      mode="center"
      border-radius="14"
      width="540rpx"
      height="358rpx"
    >
      <view class="popup-title">温馨提示</view>
      <view class="popup-content">请你确认是否支付？</view>
      <view class="btnWrap flex">
        <view class="width-50 left" @click="mShowye = false">
          <view class="inline-block">取消支付</view>
        </view>

        <view class="width-50 right" @click="$u.throttle(confirmYe, 1000)"
          >确认支付</view
        >
      </view>
    </u-popup>
    <!-- 输入支付密码 -->
    <u-popup
      v-model="paypsd"
      mode="center"
      border-radius="14"
      width="540rpx"
      height="388rpx"
    >
      <view class="popup-title">请输入支付密码</view>
      <view class="popup-content">
        <u-message-input
          :focus="true"
          :dot-fill="true"
          mode="bottomLine"
          width="60"
          active-color="ffbb00"
          @finish="finish"
          :maxlength="6"
        ></u-message-input>
      </view>
      <view class="btnWrap flex">
        <view class="width-50 left" @click="paypsd = false">
          <view class="inline-block">取消支付</view>
        </view>

        <view
          class="width-50 right"
          @click="$u.throttle(ClientBalancePay, 1000)"
          >确认支付</view
        >
      </view>
    </u-popup>
    <!-- <u-modal v-model="mShowye" cancel-text="取消支付" title="温馨提示" content='请你确认是否支付'  confirm-text="确认支付" @confirm="confirmYe" ref="uModal" :async-close="true" :show-cancel-button="true" ></u-modal> -->
    <!-- 支付宝提交表单位置 -->
    <!-- #ifdef H5 -->
    <view class="pay-submit" v-html="formDom"></view>

    <!-- #endif -->
  </view>
</template>

<script src="./payment.js"></script>

<style lang="scss" scoped>
@import "./payment.scss";
</style>
